<template>
  <div class="shop-channel-list">
      <div class="container">
        <div class="info-title">商户详情</div>
        <div class="filter-box">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-input v-model="filter.merchantId" placeholder="请输入商户号"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="filter.phone" placeholder="请输入手机号"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-button @click="handleSync(0)">同步查询</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="list-box" v-if="list.length!==0">
            <div>
                <table border="0" cellspacing="0" >
                 <thead>
                     <tr>
                         <th><div class="table-cell">通道商户号</div></th>
                         <th><div class="table-cell">商户全称</div></th>
                         <th><div class="table-cell">商户联系人</div></th>
                         <th><div class="table-cell">联系人手机</div></th>
                         <th><div class="table-cell">微信费率</div></th>
                         <th><div class="table-cell">支付宝费率</div></th>
                         <th><div class="table-cell">开户时间</div></th>
                         <th><div class="table-cell">操作</div></th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr v-for="(cell,index) in list" :key="index">
                         <td>
                             <div class="table-cell" v-html="cell.merchantId"></div>
                         </td>
                         <td>
                             <div class="table-cell" v-html="cell.shopName"></div>
                         </td>
                         <td>
                             <div class="table-cell" v-html="cell.merchantName"></div>
                         </td>
                         <td>
                             <div class="table-cell" v-html="cell.phone"></div>
                         </td>
                         <td>
                             <div class="table-cell" v-html="cell.rateWx"></div>
                         </td>
                         <td>
                             <div class="table-cell" v-html="cell.rateAlipay"></div>
                         </td>
                         <td>
                             <div class="table-cell" v-html="cell.createTime ? new Date(cell.createTime).toLocaleDateString() :'--'"></div>
                         </td>
                         <td>
                             <div class="table-cell">
                                 <el-button @click="handleSyncShop(cell)">同步信息</el-button>
                             </div>
                         </td>
                     </tr>
                 </tbody>
             </table>
            </div>
            <div class="pages-control">
                <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pages.currentPage"
                :page-size="pages.page_size"
                layout="total, prev, pager, next"
                :total="pages.total">
                </el-pagination>
            </div>
        </div>
        <div  class="no-data" v-else>
            暂无数据
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "shop-channel-list",
  data() {
    return {
        list:[],
        filter:{
            merchantId:'',
            phone:''
        },
        pages:{
          total:10,
          page_size:20,
          currentPage:1
        }
    };
  },
  created(){
      this.handleSync();
  },
  methods:{
      handleSync(page=0){
          let url = `channel/fast_silver/searchmerchantmsg?page=${page}`;
          if(!!this.filter.merchantId){
              url+=`&merchantId=${this.filter.merchantId}`
          }
          if(!!this.filter.phone){
              url+=`&phone=${this.filter.phone}`
          }

          this.$Http.get(url).then(res=>{
              if(res.data.resp_code === '000000'){
                this.list = res.data.result.content;
                this.pages.total = res.data.result.totalElements;
              }else{
                  this.$notify.info({
                    title: '消息',
                    message: res.data.resp_message
                });
              }
          }).catch(err=>{
              this.$message.error("服务器正忙！")
          })
      },
      handleCurrentChange(page){
          this.handleSync(page-1);
      },
      handleSyncShop({userId}){
          this.$confirm('此操作将会重置通道方信息！通道方需要重新审核！您确定要继续吗？','温馨提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(_=>{
                const url = `channel/fast_silver/sy/upload`;
                const params = `userId=${userId}`
                this.$Http.post(url,params).then(res=>{
                    if(res.data.resp_code === '000000'){
                        this.$message.success(res.data.resp_message);
                    }else{
                        this.$notify.info({
                            title: '消息',
                            message: res.data.resp_message
                        });
                    }
                }).catch(err=>{
                    this.$message.error("服务器正忙！")
                })
            })
         
      }
  }
};
</script>

<style scoped>
.shop-channel-list{
    box-sizing: border-box;
    padding: 20px;
}
.container{
  border: 1px solid #ededed;
}
.info-title{
    height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.filter-box{
    padding: 20px ;
}
.list-box{
    padding: 20px;
}

table {
  background-color: #fff;
  width: 100%;
  font-size: 12px;
  min-width: 900px;
}
th {
  position: relative;
  word-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: middle;
  border-bottom: 1px solid #ebeef5;
}
thead {
  padding: 8px 0;
  color: #909399;
}
tr {
  padding: 8px 0;
}
tr:hover {
  background-color: #f5f7fa;
}
td {
  border: none;
  border-bottom: 1px solid #ebeef5;
}
.table-cell {
  white-space: normal;
  word-break: break-all;
  line-height: 22px;
  padding: 10px 10px;
  text-align: center;
  min-width: 40px;
  box-sizing: border-box;
}
.no-data{
    text-align: center;
    padding: 20px ;
    border: 1px solid #dbdbdb;
    color: #dbdbdb;
}
.pages-control {
  border-top: 1px solid #ededed;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
